<!--  -->
<template>
  <el-form-item
    :label="name"
    :required="getRequire"
  >
    <el-time-picker
      v-model="val"
      class="item"
      :editable="false"
      :class="{'require':getRequire && isNull()}"
      size="small"
      :disabled="disabled"
      placeholder="选择时间"
      :format="format"
      value-format="HH:mm:ss"
      @change="change"
    />
  </el-form-item>
</template>

<script>
import { verify } from '@/utils/ik/verify/verify.js'

export default {
  name: 'IkFormTime',
  components: {},
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'change'
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    require: {
      type: Boolean,
      default: false
    },
    code: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    defaultValue: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tips: {
      type: String,
      default: ''
    },
    rules: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      val: '',
      defaultVal: '',
      errorSign: false,
      message: ''
    }
  },
  computed: {
    getRequire() {
      return this.require
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (this.value !== '') {
          this.val = value
        } else {
          this.val = this.defaultVal
        }
        this.change(this.val)
      },
      immediate: true
    }
  },
  created() {
    this.change(this.value)
  },
  methods: {
    change(value) {
      if (value === null) {
        value = ''
      }
      // 取值验证
      this.message = verify(value, this.rules)
      if (this.message !== null) {
        this.errorSign = true
      } else {
        this.errorSign = false
      }
      // 空值验证
      if (this.getRequire && this.isNull()) {
        this.errorSign = true
        this.message = "必填项，不可为空"
      }
      this.$emit('onFieldChange', this.code, '', value, this.errorSign, this.message)
      this.$emit('change', value)
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    reset() {
      this.val = this.defaultValue
    },
    clean() {
      const date = new Date()
      date.getTime()
      this.val = date
    }
  }
}
</script>
<style scoped>
.require> .el-checkbox{
  border: 1px solid rgb(245, 108, 108);
}
.item{width:calc(100% - 30px) !important}
</style>
<style lang="scss" >

.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
